<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        main{
            border:1px solid transparent;
            border-top-color:#000;
            border-bottom-color:#000;
        }
    </style>
</head>
<body>

<div class="viewport"></div>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>

<script type="text/babel">
    var HeaderComp = React.createClass({
        create : function(e){
            if(e.keyCode==13){
                var item = {
                    text : e.target.value,
                    id   : Date.now(),
                    done : true
                }
                this.props.updateState(item);
            }
        },
        render : function(){
            return (
                <header>
                    <h1>todos</h1>
                    <input type="text" onKeyUp={this.create}/> <br/>
                    <input type="checkbox"/> mark all as complete
                </header>
            )
        }
    })

    var ListComp = React.createClass({
        check : function(e){
            var t = e.target;
            this.props.check(t.parentNode.id,t.checked);
        },
        render : function(){
            return (
                <main>
                    {
                        this.props.list.map(function(item){
                            return (
                                <div className="item"
                                     style={{"text-decoration":item.done?'line-through':'none'}}
                                     id={item.id}>
                                    <input checked={item.done} onChange = {this.check}  type="checkbox" />
                                    <label >{item.text}</label>
                                    <button>X</button>
                                </div>
                            )
                        }.bind(this))
                    }
                </main>
            )
        }
    })

    var FooterComp = React.createClass({
        render : function(){
            return (
                <footer>
                    <label>{this.props.len} item left</label>
                </footer>
            )
        }
    })

    {
        /**
         getInitialState : fn  //初始化状态
         getDefaultProps : fn  //获取初始化默认属性
         componentDidMount ： fn
         render ：//
         **/
    }
    var App = React.createClass({

        getInitialState : function(){
            return {
                list : []
            }
        },
        updateState : function(item){
            this.state.list.push(item);
            this.setState({
                list : this.state.list
            });
        },
        check : function(id,done){
            // debugger;
            var list = this.state.list;
            for(var i=0;i<list.length;i++){
                var item = list[i];
                if(item.id==id){
                    item.done = done;
                    break;
                }
            }
            this.setState({
                list : this.state.list
            });
        },
        render : function(){
            var list = this.state.list;
            var len = list.length;
            return (
                <section>
                    <HeaderComp updateState={this.updateState}></HeaderComp>
                    <ListComp check={this.check} list={list}></ListComp>
                    <FooterComp len={len}></FooterComp>
                </section>
            )
        }
    })

    ReactDOM.render(
        <App></App>,
        document.querySelector(".viewport")
    )
</script>
</body>
</html>